window.onload = async () => {
  try {
    const res = await axios({
      url: '/dashboard',
    })
    console.log(res)
    // headers设置请求头
    // headers:{
    //   Authorization:localStorage.getItem('token')
    // },
    const { overview, year, salaryData, groupData } = res.data
    // 1.实现overview区域

    // document.querySelector('[name="salary"]').innerHTML = overview.salary
    // document.querySelector('[name="student_count"]').innerHTML =
    //   overview.student_count
    // document.querySelector('[name="age"]').innerHTML = overview.age
    // document.querySelector('[name="group_count"]').innerHTML =
    //   overview.group_count
    // console.log(res);

    for (let key in overview) {
      document.querySelector(`[name="${key}"]`).innerHTML = overview[key]
    }

    // 2.实现薪资区域
    function salaryEcharts(year) {
      // <!-- 步骤三：初始化echarts实例对象--------------------->
      // <!-- 步骤三：初始化echarts实例对象--------------------->
      var myChart = echarts.init(document.getElementById('line'))
      // <!-- 步骤四：制定配置和数据（option）---------------->
      var option = {
        // 标题部分的设置
        title: {
          text: '2022全学科薪资走势',
          top: '2%',
          left: '3%',
        },
        // 图表
        grid: {
          // 设置上下左右的间隙
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '10%',
        },
        // x轴的设置
        xAxis: {
          type: 'category',
          data: year.map((item) => item.month), // 箭头行数 一行代码 省略 {} return
          // x轴线段设置
          axisLine: {
            // 线段的样式
            lineStyle: {
              // 类型 虚线
              type: 'dashed',
              // 颜色
              color: '#d3d3d3',
            },
          },
          // x轴文本设置
          axisLabel: {
            // 颜色
            color: 'black',
          },
        },
        // y轴的设置
        yAxis: {
          type: 'value',
          // 分割线
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed', // 类型
              // width:20, // 宽度
              color: 'deepskyblue', // 颜色
            },
          },
        },
        color: ['#5f8eff'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true,
        },
        series: [
          {
            data: year.map((item) => item.salary),
            type: 'line',
            // 圆圈
            smooth: true,
            // 圆圈大小
            symbolSize: 10,
            // 线宽
            lineStyle: {
              width: 8,
            },
            // 区域颜色
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#aed4ff', // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#ffffff', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      // <!-- 步骤五：将配置项设置给echarts实例对象 -->
      myChart.setOption(option)
    }
    salaryEcharts(year)
    // 3.实现分布
    function classEchartsMoney(salaryData) {
      var myChart = echarts.init(document.getElementById('salary'))
      // <!-- 步骤四：制定配置和数据（option）---------------->
      var option = {
        title: {
          text: '班级薪资分布',
          top: '2%',
          left: '3%',
        },
        tooltip: {
          trigger: 'item',
        },
        // 图例
        legend: {
          bottom: '5%',
          left: 'center',
        },
        // 颜色
        color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: salaryData.map((item) => {
              return {
                value: item.g_count + item.b_count,
                name: item.label,
              }
            }),
            // [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ]
          },
        ],
      }
      // <!-- 步骤五：将配置项设置给echarts实例对象 -->
      myChart.setOption(option)
    }
    classEchartsMoney(salaryData)

    // 4.groupSalary
    function groupSalary(groupData) {
      var myChart = echarts.init(document.getElementById('lines'))
      var option = {
        // x轴设置
        xAxis: {
          type: 'category',
          data: groupData[1].map((item) => item.name),
          // 线段设置
          axisLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        yAxis: {
          type: 'value',
          // 分割线设置
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        // 颜色
        color: [
          // 渐变
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34d29a', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d4f5ea', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499fed', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d8eafb', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          // 柱状图 给多个图形,会有柱形
          {
            data: groupData[1].map((item) => item.hope_salary),
            type: 'bar',
          },
          {
            data: groupData[1].map((item) => item.salary),
            type: 'bar',
          },
        ],
      }
      myChart.setOption(option)

      // 实现点击切换数据效果，先获取所有的数据
      const btns = document.querySelectorAll('#btns .btn-xs')
      console.log(btns)
      btns.forEach((item) => {
        item.onclick = function () {
          // 先干掉其他人
          btns.forEach((sonitem) => {
            sonitem.classList.remove('btn-blue')
          })

          // 再点击谁复活谁
          this.classList.add('btn-blue')

          option.xAxis.data = groupData[index].map((item) => item.name)
          option.series[0].data = groupData[index].map(
            (item) => item.hope_salary
          )
          option.series[1].data = groupData[index].map((item) => item.salary)
          myChart.setOption(option)
        }
      })
      // 测试
      // setTimeout(function () {
      //   option.xAxis.data = groupData[2].map((item) => item.name)
      //   option.series[0].data = groupData[2].map((item) => item.hope_salary)
      //   option.series[1].data = groupData[2].map((item) => item.salary)
      //   myChart.setOption(option)
      // },1000)
    }
    groupSalary(groupData)
  } catch (err) {
    console.log(err)
  }
}
